import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Icon,
  Form,
  Input,
  Card,
  Button,
  message,
  Row,
  Col,
  Modal,
  Collapse,
  Radio,
} from 'antd';

import ImageDisplayer from '../../../components/Falcon/Attachment/ImageDisplayer';
import DescriptionList from '../../../components/DescriptionList';
import nopictures from '../../../assets/nopictures3.svg';
import { solo } from '../../../common/solo';

const FormItem = Form.Item;
const { Description } = DescriptionList;
const formItemLayout = {
  labelcol: {
    span: 8,
  },
  wrappercol: {
    span: 18,
  },
};

const formItemAuditLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 18,
  },
};

const formItemLayout1 = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk }) => ({
  risk,
}))
@Form.create()
export default class AssetChecker extends PureComponent {
  state = {
    modalvisible: false,
  };
  componentDidMount() {
    const { dispatch } = this.props;
    const { risk: { riskBusinessDetails } } = this.props;
    const { assetsVerify } = riskBusinessDetails;
    if (assetsVerify.assetType != 1) {
      dispatch({
        type: 'risk/getSecretKey',
        payload: {
          projectId: this.props.projectId,
        },
      });
    }
  }

  handleAssetsVerifySubmit = () => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        dispatch({
          type: 'risk/commitAssetsVerify',
          payload: {
            projectId: this.props.projectId,
            ...values,
          },
          callback: () => {
            const { risk: { riskResult } } = this.props;
            if (riskResult.code == 200) {
              message.success('提交成功');
              dispatch({
                type: 'risk/getBusinessDetails',
                payload: {
                  projectId: this.props.projectId,
                },
              });
              // dispatch(routerRedux.push('/risk/reviewList'));
            } else {
              message.error(riskResult.message);
            }
          },
        });
      }
    });
  };

  handleCarAssessmentOk = () => {
    //跳转H5页面
    this.setState({ modalvisible: false });
  };

  handleCarAssessmentCancel = () => {
    this.setState({ modalvisible: false });
  };

  render() {
    const {
      risk: { riskBusinessDetails, riskLoading, customerBalance, getSecretKey },
    } = this.props;
    const { assetsVerify } = riskBusinessDetails;
    const { checkDetailsValue } = this.props;

    const { getFieldDecorator } = this.props.form;
    // const secretKey = sessionStorage.getItem('secretKey')

    return (
      <Form>
        {/* {JSON.stringify(assetsVerify)} */}
        <Card title="资产摘要">
          {/* <ApplyOrderDisplayer /> */}
          <DescriptionList style={{ marginBottom: 32 }} col="2">
            <Description term="车型">{assetsVerify.carType}</Description>
            <Description term="车辆类型">
              {assetsVerify.assetType == 1 ? '新车' : '二手车'}
            </Description>
            <Description term="厂商指导价">{assetsVerify.msrp}</Description>
            <Description term="经销商报价">{assetsVerify.dealerPrice}</Description>
            <Description term="首付款">{assetsVerify.firstPayment}</Description>
            <Description term="首付款比例">
              {assetsVerify.firstPayment && assetsVerify.dealerPrice
                ? (
                    Number(assetsVerify.firstPayment) /
                    Number(assetsVerify.dealerPrice) *
                    100
                  ).toFixed(2)
                : ''}%
            </Description>
          </DescriptionList>
        </Card>
        <Card style={{ marginTop: '15px' }} title="资产核心文件">
          <FormItem label="首付款凭证" {...formItemLayout}>
            {assetsVerify.firstPayImg.length == 0 ? (
              <img src={nopictures} style={{ width: '10%', height: '10%' }} />
            ) : (
              assetsVerify.firstPayImg.map(item => {
                return (
                  <Col span={3}>
                    <ImageDisplayer src={solo.imgShow + item} />
                  </Col>
                );
              })
            )}
          </FormItem>
          {assetsVerify.assetType == 1 ? (
            ''
          ) : (
            <div>
              <FormItem label="二手车评估" {...formItemLayout}>
                <Button>
                  {/*onClick={this.haandleAssessment}*/}
                  <a
                    href={`${solo.carAssessment}key=${getSecretKey}`}
                    title="二手车估值"
                    target="_blank"
                  >
                    评估
                  </a>
                </Button>
              </FormItem>

              <FormItem label="评估报告" {...formItemLayout}>
                {assetsVerify.reportImg.length == 0 ? (
                  <img src={nopictures} style={{ width: '10%', height: '10%' }} />
                ) : (
                  assetsVerify &&
                  assetsVerify.reportImg.map(item => {
                    <ImageDisplayer src={solo.imgShow + item} />;
                  })
                )}
              </FormItem>
            </div>
          )}
        </Card>
        <Card style={{ marginTop: '15px' }}>
          <Row>
            <Col span={12}>
              {assetsVerify.assetType == 1 ? (
                ''
              ) : (
                <FormItem label="评估价格合理" {...formItemAuditLayout}>
                  {getFieldDecorator(`secondHandCarVerify`, {
                    initialValue: assetsVerify.secondHandCarVerify,
                  })(
                    <Radio.Group disabled={!checkDetailsValue}>
                      <Radio value={1}>
                        <span style={{ color: 'green' }}>
                          一致<Icon type="check" />
                        </span>
                      </Radio>
                      <Radio value={0}>
                        <span style={{ color: 'red' }}>
                          不同<Icon type="close" />
                        </span>
                      </Radio>
                    </Radio.Group>
                  )}
                </FormItem>
              )}
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem label="审批意见" {...formItemLayout1}>
                {getFieldDecorator('assetsVerify', {
                  initialValue: assetsVerify.assetsVerify,
                })(
                  <Radio.Group disabled={!checkDetailsValue}>
                    <Radio value={1}>
                      <span style={{ color: 'green' }}>
                        一致<Icon type="check" />
                      </span>
                    </Radio>
                    <Radio value={0}>
                      <span style={{ color: 'red' }}>
                        不同<Icon type="close" />
                      </span>
                    </Radio>
                  </Radio.Group>
                )}
              </FormItem>
            </Col>
          </Row>
          {checkDetailsValue ? (
            <FormItem wrappercol={{ span: 21, offset: 3 }} label="">
              <Button type="primary" onClick={this.handleAssetsVerifySubmit}>
                保存
              </Button>
            </FormItem>
          ) : null}
        </Card>

        <Modal
          visible={this.state.modalvisible}
          onOk={this.handleCarAssessmentOk}
          onCancel={this.handleCarAssessmentCancel}
        />
      </Form>
    );
  }
}
